<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>HTML</title>
    <script src="http://code.jquery.com/jquery-3.3.1.js" type="text/javascript"></script>
    <style type="text/css">
        * {
            box-sizing: border-box;
        }

        .css01 {
            background-color: yellow;
            color: red;
        }
    </style>
    <script type="text/javascript">
        $(function () {

            $("#btn01").click(function () {
                // $("#p01").hide(1000, function () {
                //     alert(888);
                // });

                // $("p").hide();
                // $("#div01").toggle(3000);
                // $("#div01").fadeToggle(3000);
                // $("#div01").fadeTo(100, 0.3);

                // $("#div01").slideToggle(1000);

                // $("#div01").animate({
                //     // left: "150px",
                //     left: "+=20px",
                //     width: "-=20px",
                //     // height: "-=10px",
                //     height: "toggle",
                //     opacity: "-=0.1"
                // }, 1000);
                $("#div01").animate({
                    left: "+=200px"
                }, 5000);
                $("#div01").animate({
                    width: "-=20px"
                }, 1000);
                $("#div01").animate({
                    height: "-=10px"
                }, 1000);

            });

            $("#btn02").click(function () {
                // $("#p01").show(1000, function () {
                //     alert(888);
                // });
                $("#div01").stop(false, true);

            });

            $("#btn03").click(function () {
                $("#p01").toggle();
            });
        })
    </script>
</head>
<body>
<div id="div01"
     style="border: 5px solid brown;background-color:yellowgreen;width: 300px;height: 200px;padding: 10px;position: relative">
    <p id="p01" style="color: red">This is a <b>text01</b>.</p>
    <p class="c01">This is a text02.</p>
    <input size="10" type="text" value="Hello01"/>
    <br/>
    <input size="10" type="text" value="Hello02"/>
    <br/>
</div>
<button id="btn01">Hide</button>
<button id="btn02">Show</button>
<button id="btn03">Toggle</button>
</body>
</html>